import React, { FC, useEffect, useState } from 'react';
import { tableConfig } from './config';
import styles from './styles.modules.less';
import _ from 'lodash';

const CustomTable: FC = () => {
  const [countTableConfig, setCountTableConfig] = useState<any>([]);
  useEffect(() => {
    const arr: any = [];

    tableConfig.forEach((item) => {
      const currentObj = arr.find((o) => o.reqName === item.reqName);
      if (currentObj) {
        currentObj.count += 1;
      } else {
        arr.push({
          ...item,
          count: 1,
        });
      }
    });

    // tableConfig.forEach((item) => {
    //   let n = false;
    //   item.reqList.forEach((v) => {
    //     for (let i = 0; i < arr.length; i++) {
    //       const val = arr[i];
    //       const c = val.reqList.find((o) => o.name === v);
    //       if (c) {
    //         c.count += 1;
    //         n = true;
    //         break;
    //       }
    //     }
    //   });
    //   if (!n) {
    //     arr.push({
    //       ...item,
    //       reqList: item.reqList.map((item) => {
    //         return {
    //           name: item,
    //           count: 1,
    //         };
    //       }),
    //     });
    //   }
    // });

    setCountTableConfig(arr);
  }, []);
  return (
    <table>
      <tbody>
        <tr>
          {_.uniqBy(tableConfig, 'date').map((item) => {
            return (
              <td key={item.id} className={styles.td}>
                {item.title}
              </td>
            );
          })}
        </tr>
        <tr>
          {_.uniqBy(tableConfig, 'date').map((item) => {
            return (
              <td key={item.id} className={`${styles.td} ${styles.td_week}`}>
                {item.week}
              </td>
            );
          })}
        </tr>
        <tr>
          {_.uniqBy(tableConfig, 'date').map((item) => {
            return (
              <td key={item.id} className={`${styles.td} ${styles.td_week}`}>
                {item.date}
              </td>
            );
          })}
        </tr>

        <tr>
          {countTableConfig.map((item) => {
            return (
              <td key={item.id} className={styles.td} colSpan={item.count}>
                {item.reqName}
              </td>
            );
          })}
        </tr>

        {/* {countTableConfig.map((item) => {
          return (
            <tr key={item.id}>
              {item.reqList.map((item) => {
                return (
                  <td
                    key={item.name}
                    className={styles.td}
                    colSpan={item.count}
                  >
                    {item.name}
                  </td>
                );
              })}
            </tr>
          );
        })} */}
      </tbody>
    </table>
  );
};

export default CustomTable;
